<template>
  <div class="problem w">
    <table cellpadding='30' cellspacing='0' width='1200'>
      <thead>
      <tr>
        <th>#</th>
        <th>题名</th>
        <th>上传时间</th>
      </tr>
      </thead>
      <tbody class="problem_data">
      <tr v-for="problem in problems.slice(start_index,end_index)" @click="problem_click">
        <th><span>{{problem.index}}</span></th>
        <th class="problem_title"> <span :router="/problem/ + ':' + problem.index">{{problem.problem_title}}</span></th>
        <th><span>{{problem.time}}</span></th>
      </tr>
      </tbody>
      <tbody class="problem_pagination">
      <tr>
        <td colspan="3">
            <span
                class="icon-circle-left page_change_button btn_silence"
                :class="page_current_index === 1 ? 'btn_forbidden' : 'btn_permit'"
                @click="page_left"
            ></span>
          <span
              class="page_button"
              v-for="index in (Math.ceil((problems.length - 1)/10))"
              v-if="problems.length<=50"
              :class="index+page_index === pageActive ? 'btn_active' : 'btn_silence'"
              @click="page_change(index)"
          >{{index}}</span>
          <span
              class="page_button"
              v-for="index in 5"
              v-if="problems.length>50"
              :class="index+page_index === pageActive ? 'btn_active' : 'btn_silence'"
              @click="page_change(index + page_index)"
          >{{index + page_index}}</span>
          <span
              class="icon-circle-right page_change_button btn_silence"
              :class="page_current_index === Math.ceil(problems.length/10) ? 'btn_forbidden' : 'btn_permit'"
              @click="pageRight"
          ></span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>

</template>

<script>
export default {
  name: "Problem_list",
  data(){
    return {
      problems:[
        {
          index:1,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-01'
        },
        {
          index:2,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-02'
        },
        {
          index:3,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-03'
        },
        {
          index:4,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-04'
        },
        {
          index:5,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-05'
        },
        {
          index:6,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-06'
        },
        {
          index:7,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-07'
        },
        {
          index:8,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-08'
        },
        {
          index:9,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-09'
        },
        {
          index:10,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-10'
        },
        {
          index:11,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-11'
        },
        {
          index:12,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-12'
        },
        {
          index:13,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-13'
        },
        {
          index:14,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-14'
        },
        {
          index:15,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-15'
        },
        {
          index:16,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-16'
        },
        {
          index:17,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-17'
        },
        {
          index:18,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-18'
        },
        {
          index:19,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-19'
        },
        {
          index:20,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-20'
        },
        {
          index:21,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-21'
        },
        {
          index:22,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-22'
        },
        {
          index:23,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-23'
        },
        {
          index:24,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-24'
        },
        {
          index:25,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-25'
        },
        {
          index:26,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-26'
        },
        {
          index:27,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-27'
        },
        {
          index:28,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-28'
        },
        {
          index:29,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-29'
        },
        {
          index:30,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-30'
        },
        {
          index:31,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-31'
        },
        {
          index:32,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-32'
        },
        {
          index:33,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-33'
        },
        {
          index:34,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-34'
        },
        {
          index:35,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-35'
        },
        {
          index:36,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-36'
        },
        {
          index:37,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-37'
        },
        {
          index:38,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-38'
        },
        {
          index:39,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-39'
        },
        {
          index:40,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-40'
        },
        {
          index:1,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-01'
        },
        {
          index:2,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-02'
        },
        {
          index:3,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-03'
        },
        {
          index:4,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-04'
        },
        {
          index:5,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-05'
        },
        {
          index:6,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-06'
        },
        {
          index:7,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-07'
        },
        {
          index:8,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-08'
        },
        {
          index:9,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-09'
        },
        {
          index:10,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-10'
        },
        {
          index:11,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-11'
        },
        {
          index:12,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-12'
        },
        {
          index:13,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-13'
        },
        {
          index:14,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-14'
        },
        {
          index:15,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-15'
        },
        {
          index:16,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-16'
        },
        {
          index:17,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-17'
        },
        {
          index:18,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-18'
        },
        {
          index:19,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-19'
        },
        {
          index:20,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-20'
        },
        {
          index:21,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-21'
        },
        {
          index:22,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-22'
        },
        {
          index:23,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-23'
        },
        {
          index:24,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-24'
        },
        {
          index:25,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-25'
        },
        {
          index:26,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-26'
        },
        {
          index:27,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-27'
        },
        {
          index:28,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-28'
        },
        {
          index:29,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-29'
        },
        {
          index:30,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-30'
        },
        {
          index:31,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-31'
        },
        {
          index:32,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-32'
        },
        {
          index:33,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-33'
        },
        {
          index:34,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-34'
        },
        {
          index:35,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-35'
        },
        {
          index:36,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-36'
        },
        {
          index:37,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-37'
        },
        {
          index:38,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-38'
        },
        {
          index:39,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-39'
        },
        {
          index:40,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-40'
        },
        {
          index:1,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-01'
        },
        {
          index:2,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-02'
        },
        {
          index:3,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-03'
        },
        {
          index:4,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-04'
        },
        {
          index:5,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-05'
        },
        {
          index:6,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-06'
        },
        {
          index:7,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-07'
        },
        {
          index:8,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-08'
        },
        {
          index:9,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-09'
        },
        {
          index:10,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-10'
        },
        {
          index:11,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-11'
        },
        {
          index:12,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-12'
        },
        {
          index:13,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-13'
        },
        {
          index:14,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-14'
        },
        {
          index:15,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-15'
        },
        {
          index:16,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-16'
        },
        {
          index:17,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-17'
        },
        {
          index:18,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-18'
        },
        {
          index:19,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-19'
        },
        {
          index:20,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-20'
        },
        {
          index:21,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-21'
        },
        {
          index:22,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-22'
        },
        {
          index:23,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-23'
        },
        {
          index:24,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-24'
        },
        {
          index:25,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-25'
        },
        {
          index:26,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-26'
        },
        {
          index:27,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-27'
        },
        {
          index:28,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-28'
        },
        {
          index:29,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-29'
        },
        {
          index:30,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-30'
        },
        {
          index:31,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-31'
        },
        {
          index:32,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-32'
        },
        {
          index:33,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-33'
        },
        {
          index:34,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-34'
        },
        {
          index:35,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-35'
        },
        {
          index:36,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-36'
        },
        {
          index:37,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-37'
        },
        {
          index:38,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-38'
        },
        {
          index:39,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-39'
        },
        {
          index:40,
          problem_title:'反转每对括号中的子串',
          time:'2021-5-26-16-12-40'
        }
      ],
      start_index: 0,
      end_index: 10,
      pageActive: 1,
      page_current_index: 1,
      page_index: 0
    }
  },
  methods: {
    problem_click(e){
      let dom = e.target;

      if (e.target.nodeName.toLowerCase() === "span") {
        let router = dom.getAttribute("router")
        this.$router.push(router)
      }
    },

    page_change: function (index) {
      this.page_current_index = index
      this.page_changeAll()
    },

    page_left:function (){
      this.page_current_index -= 1
      this.page_changeAll()
    },

    pageRight:function (){
      this.page_current_index += 1
      this.page_changeAll()
    },

    page_changeAll:function (){
      this.start_index = (this.page_current_index - 1) * 10
      this.end_index = this.page_current_index * 10
      this.pageActive = this.page_current_index
      if(this.page_current_index > 3 && this.page_current_index < Math.ceil(this.problems.length/10) - 2){
        this.page_index = this.page_current_index - 3
      }
      else if(this.page_current_index <= 3){
        this.page_index = 0
      }
      else{
        this.page_index = Math.ceil(this.problems.length/10) - 5
      }
    }
  }
}
</script>

<style scoped>
@import "../../common/stylus/style.css";
@import "../../assets/css/all.css";
@import "../../assets/css/problem_list.css";
</style>